<template>
  <div>
  <Header></Header>
    <Tabbar></Tabbar>
    <router-view></router-view>
    <Player></Player>
  </div>
</template>
<script>
import Header from './components/Header'
import Tabbar from './components/Tabbar'
import Player from './views/player'
export default {
  name: 'App',
  components: {
    Header,
    Tabbar,
    Player
  },
  mounted () {
    console.log(this.$el)
  }
}
</script>
<style scoped lang="scss">
  @import "assets/css/variable";
  @import "assets/css/mixin";
  .theme{
    position: fixed;
    bottom: 0;
    left: 0;
    button{
      width: 100px;
      height: 100px;
      &:nth-of-type(1){
        background: $background-color-theme;
      }
      &:nth-of-type(2){
        background: $background-color-theme1;
      }&:nth-of-type(3){
         background: $background-color-theme2;
       }
    }
  }

</style>
